<template>
  <div style="width: 100%">
    <el-table
      :data="tableData"
      style="width: 100%"
      :stripe="true"
      :highlight-current-row="true"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item
              label="拒绝原因"
              v-if="props.row.deny_reason"
              style="width: 100%"
            >
              <p>{{ props.row.deny_reason }}</p>
            </el-form-item>
            <el-form-item label="商户名">
              <span>{{ props.row.common_name }}</span>
            </el-form-item>
            <el-form-item label="申请理由">
              <span>{{ props.row.apply_reason }}</span>
            </el-form-item>
            <el-form-item label="证件">
              <div class="demo-image__preview">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="props.row.license_url"
                  :preview-src-list="props.row.license_urls"
                >
                </el-image>
              </div>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="商户名"
        prop="common_name"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column label="状态" prop="pass"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="50">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹窗 -->
    <el-dialog
      title="修改合作申请"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <div class="apply_contain">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="80px"
          class="form"
        >
          <el-form-item label="商户名" prop="common_name">
            <el-input v-model="form.common_name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="申请理由"
            prop="apply_reason"
            class="apply_reason"
          >
            <el-input
              type="textarea"
              v-model="form.apply_reason"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="上传证件" prop="license_url">
            <el-button type="primary" @click="imagecropperShow = true"
              >上传</el-button
            >
            <div class="workBacground">
              <img
                v-if="form.license_url"
                :src="form.license_url"
                alt="公司LOGO"
              />
            </div>
            <image-cropper
              v-show="imagecropperShow"
              :key="imagecropperKey"
              :width="300"
              :height="300"
              url="/resources-action/user/self/edit"
              :noCircle="true"
              lang-type="zh"
              @close="close"
              @crop-upload-success="cropSuccess"
              @crop-upload-fail="cropFail"
            />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit('form')"
          >确 定</el-button
        >
        <el-button type="primary" @click="onSubmit('form')"
           :loading="true" v-if="loading">确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { cooperationing } from "@/api/user";
import ImageCropper from "@/components/ImageCropper";
import { CooperationApply } from "@/api/user"
export default {
  components:{
    ImageCropper
  },
  data() {
    var validateCommentName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入商户名"));
      } else {
        callback();
      }
    };
    var validateLicense = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请上次证件"));
      } else {
        callback();
      }
    };
    var validateApplReason = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入申请理由"));
      } else if (value.length < 200) {
        callback(new Error("申请理由字数必须在200和1000之间"));
      } else if (value.length > 2000) {
        callback(new Error("申请理由字数必须在200和1000之间"));
      } else {
        callback();
      }
    };
    return {
      form:{
        common_name:"",
        apply_reason:"",
        license_url:""
      },
      loading:false,
      rules:{
        common_name: [{ required: true, validator: validateCommentName, trigger: "blur" }],
        apply_reason: [
          { required: true, validator: validateApplReason, trigger: "blur" },
        ],
        license_url: [
          { required: true, validator: validateLicense, message: "请输入职位图片", trigger: "blur" },
        ],
      },
      imagecropperShow: false,
      imagecropperKey: 0,
      tableData: [],
      dialogVisible: false,
    };
  },
  methods: {
    handleClick(row) {
      this.form.common_name = row.common_name;
      this.form.apply_reason = row.apply_reason;
      this.form.license_url = row.license_url;
      this.dialogVisible = true;
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(valid)
        if (valid) {
          this.loading = true;
          CooperationApply(this.form)
            .then((result) => {
              this.$message.success("合作递交成功，请耐心等候,申请成功后，重新登录即可发布职位。");
              this.dialogVisible = false
              this.loading = false;
            })
            .catch((err) => {
              console.log(err)
              this.$message.warning(err);
            });
        } else {
          this.$message.warning("合作递交失败，请完善表单");
          return false;
        }
      });
    },
    //上传图片
    cropSuccess(resData) {
      this.imagecropperShow = false;
      this.imagecropperKey = this.imagecropperKey + 1;
      this.form.license_url = resData;
    },
    cropFail(error) {
      console.log(error);
    },
    close() {
      this.imagecropperShow = false;
    },
  },
  mounted() {
    cooperationing().then((e) => {
      let data = [];
      let array = [];
      e.data.content.forEach((element) => {
        array = [];
        array.push(element.license_url);
        data.push({
          license_url: element.license_url,
          apply_reason: element.apply_reason,
          common_name: element.common_name,
          deny_reason: element.deny_reason,
          license_urls: array,
          pass: element.pass == null ? "审核中" : "拒绝",
        });
      });
      this.tableData = data;
    });
  },
};
</script>
<style lang="scss" scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.demo-table-expand ::v-deep .el-form-item__label {
  font-weight: 600;
}
.apply_contain{
  width: 100%;
  .apply_reason ::v-deep .el-textarea__inner{
    min-height: 150px !important;
  }
}
</style>